<script setup>
import { ref, watch, computed } from 'vue'
import '../assets/css/main.css'

defineProps({
  msg: String,
})

const random_name = ref('点击「开始抽问」');
const button = ref('开始抽问')
const range_speed = ref(50);
const min_speed = ref(1);
const max_speed = ref(100);
let intervalId = null;
// 反转后的进度值
const reversed_speed = computed(() => max_speed.value - range_speed.value)

// 监听 range_speed 的变化
watch(range_speed, () => {
  console.log('Speed changed to:', range_speed.value)
  console.log('reversed_speed to:', reversed_speed.value)
  if (intervalId) {
    startTimer() // 重新启动计时器
  }
})

// 启动计时器
const startTimer = () => {
  if (intervalId) clearInterval(intervalId) // 清除之前的计时器
  intervalId = setInterval(() => {
    random_name.value = Math.floor(Math.random() * 100) // 示例随机数
  }, reversed_speed.value) // 使用 .value 获取实际值
}

// 开始抽问
const start = () => {
  console.log('你点击了按钮！')
  if (intervalId !== null) {
    button.value = '开始抽问'
    clearInterval(intervalId)
    intervalId = null;
  } else {
    button.value = '停止计时'
    startTimer() // 启动计时器
  }
}
</script>

<template>
  <h1>吕老师课堂抽问随机点名</h1>
    <div class="name-display" id="name-display">{{ random_name }}</div>
    <div class="controls">
        <button id="start-button" :onclick="start">{{ button }}</button>
        <input type="range" id="speed-control" :min="min_speed" :max="max_speed" v-model="range_speed">
    </div>
</template>
